<template>
<!--主页头部-->
  <div id="main_header" style="background-color: #ffffff;width: 100%;position: fixed;z-index:999;">
   <el-row style="width: 80%;margin:0 auto">
      <el-menu :default-active=this.index
               class="el-menu--demo"
               mode="horizontal"
               @select="handleSelect"
               active-text-color="#409EFF">
        <div id="navigation">
          <el-col span="4">
            <el-image style="height: 55px; width: 100%;" :ref="hand_url" :src="hand_url"></el-image>
          </el-col>
 <!--主页-->
          <el-col span="3">
            <el-tooltip class="item" effect="dark" content="主页" placement="bottom">
              <el-menu-item index="1" @click="jump('主页','1','main')"  >
                  <i class="el-icon-s-home"></i>
              </el-menu-item>
            </el-tooltip>
          </el-col>
<!--热门-->
          <el-col span="3">
            <el-tooltip class="item" effect="dark" content="热门" placement="bottom">
              <el-menu-item index="2" @click="jump('热门','2','heat')">
                  <i class="el-icon-sunny" ></i>
              </el-menu-item>
            </el-tooltip>
          </el-col>

<!--编辑博客-->
          <el-col span="3">
            <el-tooltip class="item" effect="dark" content="编辑博客" placement="bottom">
              <el-menu-item index="3" @click="jump('博客-编辑','3','edit')">
                <i class="el-icon-edit"></i>
              </el-menu-item>
            </el-tooltip>
          </el-col>

<!--个人-->
          <el-col span="3">
            <el-tooltip class="item" effect="dark" content="用户主页" placement="bottom">
              <el-menu-item index="4" @click="jump('个人','4','oneself')">
                <i class="el-icon-s-custom"></i>
              </el-menu-item>
            </el-tooltip>
          </el-col>

        </div>
  <!--搜索-->
        <el-col span="7">
          <div style="position: relative" >
            <el-autocomplete
                class="inline-input"
                ref="inref"
                v-model="state"
                :fetch-suggestions="querySearch"
                placeholder="请输入内容"
                :trigger-on-focus=on_focus
                @select="hSelect"
            >
              <template slot-scope="{ item }">
                <!--  微博建议-->
                <div class="name" v-if="advise_judge">{{ item.value }}</div>

                <!-- 用户建议-->
                <div v-else>
                  <div style="padding: 20px 0 5px 5px">
                    <el-avatar :src="item.url" :size="30" style="margin-bottom: -10px"></el-avatar>
                    &nbsp;
                    <span style="">{{item.value}}</span>
                  </div>
                </div>
                <el-button
                    type="text"
                    id="select_button"
                    @click="selectPro()"
                >
                  {{bu_text}}
                </el-button>
              </template>
            </el-autocomplete>
            <el-button type="primary" icon="el-icon-search" id="search_button" @click="search()"></el-button>
          </div>
        </el-col>
      </el-menu>
   </el-row>
  </div>
</template>

<script>
import img from '@/assets/远方.png'
import {setSession,getSession} from "@/utils/Token";



export default {
  name: "mian_hander",
  components: {},

  data() {
    return {
      hand_url:img,
      index:'1',
      // search相关
      bu_text:"相关用户",
      // 搜索建议
      category: [],
      // 是否使用焦点
      on_focus:false,
      // 搜索建议类型
      advise_judge:true,
      user:[
        { "value": "哈士奇1", "url": "../../assets/icon.png" },
        { "value": "哈士奇2", "url": "../assets/icon.png" },
        { "value": "哈士奇3", "url": "../assets/icon.png" },
        { "value": "哈士奇4", "url": "../assets/icon.png" },
        { "value": "哈士奇5", "url": "../assets/icon.png"},
        { "value": "哈士奇6", "url": "../assets/icon.png" },
        { "value": "阿拉斯加1", "url": "../assets/icon.png" },
        { "value": "阿拉斯加2", "url": "../assets/icon.png" },
        { "value": "阿拉斯加3", "url": "../assets/icon.png" },
        { "value": "阿拉斯加4", "url": "../assets/icon.png" },
        { "value": "阿拉斯加5", "url": "../assets/icon.png" },
        { "value": "萨摩耶1", "url": "../assets/icon.png" },
        { "value": "萨摩耶2", "url": "../assets/icon.png" },
        { "value": "萨摩耶3", "url": "../assets/icon.png" },
        { "value": "萨摩耶4", "url": "../assets/icon.png" },
        { "value": "萨摩耶5", "url": "../assets/icon.png" },
      ],
      blog:[
        { "value": "哈士奇1", "url": "" },
        { "value": "哈士奇2", "url": "" },
        { "value": "哈士奇3", "url": "" },
        { "value": "哈士奇4", "url": "" },
        { "value": "哈士奇5", "url": "" },
        { "value": "哈士奇6", "url": "" },
        { "value": "阿拉斯加1", "url": "" },
        { "value": "阿拉斯加2", "url": "" },
        { "value": "阿拉斯加3", "url": "" },
        { "value": "阿拉斯加4", "url": "" },
        { "value": "阿拉斯加5", "url": "" },
        { "value": "萨摩耶1", "url": "" },
        { "value": "萨摩耶2", "url": "" },
        { "value": "萨摩耶3", "url": "" },
        { "value": "萨摩耶4", "url": "" },
        { "value": "萨摩耶5", "url": "" },
        { "value": "萨摩耶6", "url": "" },
      ],
      state: '',
    };
  },
  methods: {
    /*页面跳转*/
    jump(title,index,str){
      setSession('index',index);
      setSession('title',title + '-全部');
      setSession('group_index',index+'-1');
      setSession('activeIndex','1-1-1');
      if(title != '博客-编辑') {
        setSession('title1',title);
      }
      if(this.$route.path != '/'+ str) {
        this.$router.push("/" + str);
      }
    },
    // 搜索相关开始
    // 选择搜索提示类型
    selectPro(){
      if(this.bu_text==='相关微博'){
        this.bu_text='相关用户';
        this.category=this.blog;
        this.advise_judge=true;
      }else {
        this.bu_text='相关微博'
        this.category=this.user;
        this.advise_judge=false;
      }
      // 点击后获取焦点继续显示下拉框
      //没有计时器会获取到上次的数据
      setTimeout(()=>{
        this.$refs.inref.focus()
      },0)
      // 设置可以通过焦点获取建议
      this.on_focus=true;
    },
    // 搜索相关
    querySearch(queryString, cb) {
      // 当搜索框为空时,设置不能通过获取焦点获取建议
      if (queryString){
        this.on_focus=false;
      }

      let category = this.category;
      let results = [];
      // 当输入数据时就调用匹配方法过滤
      if (queryString){
        results=category.filter(this.createFilter(queryString));
      }

      //添加占位数据,给按钮腾位置
      results.push({ "value":queryString})
      // 调用 callback 返回建议列表的数据
      cb(results);
    },
    createFilter(queryString) {
      return (category) => {
        // 字符匹配给出提示
        return (category.value.toLowerCase().indexOf(queryString.toLowerCase()) != -1)
      };
    },
    // 点击建议执行的方法
    hSelect(item) {
/*      console.log(item);
      console.log(this.state);*/
    }
    //搜索相关结束
  },
/*挂载，对于选择框位置进行校正*/
  mounted() {
    this.category = this.blog;
    if(getSession('index')!=null) {
      this.index = getSession('index');
    }
  },

  /*当页面创建时添加背景*/
  beforeCreate(){
    document.querySelector('body').classList.add("loginBgc1");
  },
  /*当页面销毁时删除背景*/
  beforeDestroy(){
    document.querySelector('body').classList.remove("loginBgc1");
  }
}
</script>

<style>
/*设置背景图片*/
.loginBgc1 {
  background-image: url("../../assets/背景图片.jpg");
  background-repeat: no-repeat;
  background-size: 100%;
  background-position: 0px -50px;
  background-attachment: fixed;
  margin: 0px;
}
/*搜索按钮样式*/
#search_button{
  background: transparent;
  color: #DCDFE6;
  border: none;
  position: absolute;
  font-size: 20px;
  left: 61%;
  top: 20%;
}
#search_button:hover{
  color: #54b6ff;
}

/*搜索框*/
.inline-input{
  top: 10px;
}
/*搜索提示*/
.addr {
  font-size: 12px;
  color: #b4b4b4;
}

/*让占位数据被覆盖*/
.el-autocomplete-suggestion__wrap {
  margin-bottom: -25px !important;
}

/*将选择按钮固定在底部*/
#select_button{
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding-right: 20px;
  background-color: #e4e7ed;
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
  box-sizing: border-box;
  text-align: center !important;
}

/*导航栏图标样式*/
#main_header #navigation i{
font-size: 30px;

}

</style>